<template>
	<view class="ai-page">
		<!-- 上半部分蓝色背景 -->
		<view class="top-section">

		</view>
		<!-- 下半部分白色圆角内容区，固定底部 -->
		<view class="bottom-section-fixed">

			<!-- 可滚动的内容区域，包含图片上传和聊天记录 -->
			<scroll-view class="chatbox-content-scroll" scroll-y="true" :scroll-top="scrollTop" @scroll="onScroll">
				<!-- 图片上传区域 -->
				<view class="chatbox-square" :style="{ aspectRatio: aspectRatioStyle }">
					<view v-if="fileList1.length > 0" class="preview-container">
						<image class="preview-image" :src="fileList1[0].url" mode="aspectFit"></image>
						<view class="preview-actions">
							<view class="preview-action-btn" @click="deletePic">
								<u-icon name="trash" size="20" color="#fff"></u-icon>
							</view>
						</view>
					</view>
					<view v-else class="upload-area" @click="chooseImage">
						<img class="chatbox-upload-icon" src="/static/upload.png" alt="上传" />
						<text class="upload-text">点击上传图片</text>
					</view>
				</view>
				<!-- 固定的比例选择器 -->
				<view class="fixed-top-section">
					<view class="chatbox-ratio">
						<text>比例</text>
						<view class="ratio-select-box" @click="showRatioSelector">
							<text>{{ selectedRatio }}</text>
							<u-icon name="arrow-down" size="14" color="#666"></u-icon>
						</view>
					</view>
				</view>

				<!-- 聊天消息区域 -->
				<view class="chatbox-messages" ref="chatMessages">
					<view v-for="(message, index) in chatMessages" :key="index"
						:class="['message-item', message.type === 'ai' ? 'ai-message' : 'user-message']">
						<text class="message-text">{{ message.text }}</text>
					</view>
				</view>

			</scroll-view>

			<!-- 固定在底部的输入区域 -->
			<view class="fixed-bottom-section">
				<view class="chatbox-input-row">
					<input class="chatbox-input" v-model="chatInput" placeholder="描述你想要创作的视频" @keyup.enter="sendChat"
						@focus="onInputFocus" @blur="onInputBlur" adjust-position="false" />
					<button class="chatbox-send-btn" @click="sendChat">
						<u-icon size="20" name="arrow-upward" style="color: #2563eb;"></u-icon>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				chatInput: '',
				chatMessages: [{
						type: 'ai',
						text: '你好！我是AI助手，请告诉我你想创作什么样的视频？',
						time: Date.now()
					},
					
				],
				fileList1: [],
				selectedRatio: '1:1',
				ratioOptions: [{
						value: '1:1',
						label: '1:1 (正方形)'
					},
					{
						value: '4:3',
						label: '4:3 (标准)'
					},
					{
						value: '16:9',
						label: '16:9 (宽屏)'
					},
					{
						value: '9:16',
						label: '9:16 (竖屏)'
					},
					{
						value: '3:4',
						label: '3:4 (竖屏)'
					}
				],
				isKeyboardShow: false,
				scrollTop: 0,
				videoUrl: '', // 视频URL
			}
		},
		computed: {
			aspectRatioStyle() {
				return this.selectedRatio.replace(':', '/');
			}
		},
		methods: {
			sendChat() {
				if (!this.chatInput.trim()) return;

				// 添加用户消息
				this.addMessage(this.chatInput.trim(), 'user');

				// 准备要传回的数据
				const pageData = {
					imageUrl: this.fileList1.length > 0 ? this.fileList1[0].url : '',
					description: this.chatInput,
					ratio: this.selectedRatio
				};

				// 返回上一页并传递数据
				uni.navigateBack({
					success: () => {
						// 使用事件总线传递数据
						uni.$emit('updateImageData', pageData);
					}
				});

				this.chatInput = '';
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 更新预览图片
						this.fileList1 = [{
							url: res.tempFilePaths[0],
							status: 'success',
							message: '',
							ratio: this.selectedRatio
						}];
						// 添加上传成功的消息
						this.addMessage('已上传图片', 'user');
					},
					fail: (err) => {
						console.error('选择图片失败：', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			deletePic() {
				this.fileList1 = [];
				// 添加删除图片的消息
				this.addMessage('已删除图片', 'user');
			},
			showRatioSelector() {
				uni.showActionSheet({
					itemList: this.ratioOptions.map(option => option.label),
					success: (res) => {
						this.selectedRatio = this.ratioOptions[res.tapIndex].value;
					}
				});
			},
			onInputFocus() {
				this.isKeyboardShow = true;
				// 延迟滚动到底部，确保键盘弹出后再滚动
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.chatbox-wrap').boundingClientRect(data => {
						if (data) {
							this.scrollTop = data.height * 2; // 确保滚动到底部
						}
					}).exec();
				}, 300);
			},
			onInputBlur() {
				this.isKeyboardShow = false;
			},
			onScroll(e) {
				// 可以在这里处理滚动事件
				console.log('scroll', e);
			},
			addMessage(text, type) {
				const message = {
					type: type,
					text: text,
					time: Date.now()
				};
				this.chatMessages.push(message);
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.chatbox-content-scroll').boundingClientRect(data => {
						if (data) {
							this.scrollTop = data.height * 2;
						}
					}).exec();
				});
			}
		}
	}
</script>


<style scoped>
	.ai-page {
		min-height: 100vh;
		background: #2563eb;
		position: relative;
	}

	.top-section {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 10px;
		background: #2563eb;
		z-index: 20;
	}

	.bottom-section-fixed {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #eee;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		box-shadow: 0 -8px 32px rgba(37, 99, 235, 0.06);
		height: 90vh;
		display: flex;
		flex-direction: column;
		z-index: 10;
	}

	.fixed-top-section {
		padding: 12px 0;
		background: #eee;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.chatbox-content-scroll {
		flex: 1;
		height: 0;
		/* 这个很重要，让scroll-view能够正确计算高度 */
	}

	.chatbox-messages {
		padding: 16px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.fixed-bottom-section {
		padding: 12px 16px;
		background: #eee;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.chatbox-square {
		width: 90vw;
		max-width: 340px;
		background: #fff;
		border: 2px solid #eee;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 24px auto 0;
		position: relative;
		overflow: hidden;
	}

	.chatbox-upload-icon {
		width: 48px;
		height: 48px;
		display: block;
		/* z-index: 5000; */
	}

	.message-item {
		max-width: 85%;
		margin-bottom: 16px;
		display: flex;
		width: 100%;
		justify-content: flex-start;
		padding: 0 12px;
		box-sizing: border-box;
	}

	.message-text {
		padding: 12px 16px;
		border-radius: 16px;
		font-size: 15px;
		line-height: 1.4;
		max-width: 100%;
		word-break: break-all;
	}

	.ai-message {
		justify-content: flex-start;
		margin-right: auto;
	}

	.ai-message .message-text {
		background: #fff;
		color: #333;
		border-radius: 16px 16px 16px 4px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.user-message {
		justify-content: flex-end;
		padding-right: 10px;
		margin-left: auto;
	}

	.user-message .message-text {
		background: #2563eb;
		color: #fff;
		border-radius: 16px 16px 4px 16px;
		box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
		text-align: right;
	}

	.chatbox-ratio {
		width: 90vw;
		max-width: 340px;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.ratio-select-box {
		margin-left: 8px;
		padding: 4px 12px;
		font-size: 15px;
		border-radius: 4px;
		border: 1px solid #ddd;
		background: #fff;
		height: 32px;
		min-width: 120px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}

	.chatbox-input-row {
		display: flex;
		align-items: center;
		width: 90vw;
		max-width: 340px;
		margin: 0 auto;
	}

	.chatbox-input {
		flex: 1;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 6px;
		font-size: 15px;
		background: #fff;
		margin-right: 8px;
	}

	.chatbox-send-btn {
		width: 32px;
		height: 32px;
		border: none;
		background: #ffffff;
		border: 2px solid #2563eb;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		cursor: pointer;
	}

	.chatbox-send-icon {
		width: 18px;
		height: 18px;
		display: block;
	}

	.preview-container {
		width: 100%;
		height: 100%;
		position: relative;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.preview-actions {
		position: absolute;
		top: 8px;
		right: 8px;
		display: flex;
		gap: 8px;
	}

	.preview-action-btn {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.upload-area {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: #fff;
		gap: 8px;
	}

	.upload-text {
		font-size: 14px;
		color: #666;
	}

	.video-preview-section {
		width: 90vw;
		max-width: 340px;
		margin: 16px auto;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.video-container {
		width: 100%;
		position: relative;
		background: #000;
	}

	.preview-video {
		width: 100%;
		aspect-ratio: 16/9;
		background: #000;
	}

	.video-controls {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 8px;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
	}

	.progress-bar {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 8px;
	}

	.progress-time {
		font-size: 12px;
		color: #fff;
		min-width: 40px;
	}

	.progress-track {
		flex: 1;
		height: 4px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 2px;
		position: relative;
	}

	.progress-inner {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background: #fff;
		border-radius: 2px;
	}

	.control-buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.control-left,
	.control-right {
		display: flex;
		gap: 16px;
	}

	.control-btn {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.action-buttons {
		display: flex;
		padding: 12px;
		gap: 8px;
	}

	.action-btn {
		flex: 1;
		height: 36px;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.download-btn {
		background: #f0f0f0;
		color: #333;
	}

	.upload-btn {
		background: #4f46e5;
		color: #fff;
	}

	.share-btn {
		background: #f0f0f0;
		color: #333;
	}
</style>